<template>
	<view>
		<scroll-view :style="{height:  elementHeight + 'vh'}" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="0" refresher-background="#EE7B30" @refresherpulling="onPulling" @refresherrefresh="onRefresh" :scroll-top="scrollTop"  @scrolltolower="scrolltolower" :lower-threshold="juli" class="scrollCla">
			<view>
				<view v-for="(itme,index) in list" :key="index" style="width: 701rpx;height: 148rpx;background: #FFFFFF;border-radius: 18rpx;margin-left: 24.77rpx;margin-top: 40rpx;position: relative;">
					<image :src="img" style="width: 210rpx;vertical-align: middle;position: relative;top: -13rpx;" mode="widthFix" ></image>
					<view style="position: absolute;display: flex;flex-direction: column;width: 110rpx;z-index: 1212;top: 20rpx;left: 48rpx;align-items: center;">
						<view style="font-size: 30rpx;color: #FFFFFF;font-weight: bold;">{{itme.shuxing}}</view>
						<view style="font-size: 23.5rpx;color: #FFFFFF;margin-top: 15rpx;">{{itme.map.commodityCouponEntity.descr}}</view>
					</view>
					<view style="font-size: 35rpx;font-weight: bold;position: absolute;left: 232rpx;top: 36rpx;">
						<view>
							<text>新人专属</text>
							<text>{{itme.shuxing}}</text>
						</view>
						<view style="margin-top: 20rpx;font-size: 21rpx;" v-if="itme.pan">
							<daojishi :start_time="shi" :end_time="itme.overdue_time" :fontColor="color"></daojishi>
						</view>
						<view style="margin-top: 20rpx;font-size: 21rpx;" v-if="!itme.pan">
							已过期
						</view>
					</view>
					<view style="width: 120rpx;height: 46rpx;padding: 14rpx;box-sizing: border-box;border: 0.5rpx solid #FF7300;border-radius: 22rpx;line-height: 18rpx;text-align: center;font-size: 21rpx;position: absolute;top: 56rpx;left: 563rpx;z-index: 13212;color: #FF7300;"  v-if="itme.pan" @tap.stop="go(itme)">
						<text>立即使用</text>
					</view>
				</view>
			</view>
			<view>
				<view v-for="(itme,index) in conten" :key="index" style="width: 701rpx;height: 148rpx;background: #FFFFFF;border-radius: 18rpx;margin-left: 24.77rpx;margin-top: 40rpx;position: relative;">
					<image :src="img" style="width: 210rpx;vertical-align: middle;position: relative;top: -13rpx;" mode="widthFix" ></image>
					<view style="position: absolute;display: flex;flex-direction: column;width: 110rpx;z-index: 1212;top: 20rpx;left: 48rpx;align-items: center;">
						<view style="font-size: 30rpx;color: #FFFFFF;font-weight: bold;">{{itme.shuxing}}</view>
						<view style="font-size: 23.5rpx;color: #FFFFFF;margin-top: 15rpx;">{{itme.map.commodityCouponEntity.descr}}</view>
					</view>
					<view style="font-size: 35rpx;font-weight: bold;position: absolute;left: 232rpx;top: 36rpx;">
						<view>
							<text>新人专属</text>
							<text>{{itme.shuxing}}</text>
							<text>折扣券</text>
						</view>
						<view style="margin-top: 20rpx;font-size: 21rpx;" v-if="itme.pan">
							<daojishi :start_time="shi" :end_time="itme.overdue_time" :fontColor="color"></daojishi>
						</view>
						<view style="margin-top: 20rpx;font-size: 21rpx;" v-if="!itme.pan">
							已过期
						</view>
					</view>
					<view style="width: 120rpx;height: 46rpx;padding: 14rpx;box-sizing: border-box;border: 0.5rpx solid #FF7300;border-radius: 22rpx;line-height: 18rpx;text-align: center;font-size: 21rpx;position: absolute;top: 56rpx;left: 563rpx;z-index: 13212;color: #FF7300;"  v-if="itme.pan" @tap.stop="go(itme)">
						<text>立即使用</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		props:{
			list_shuju: Number,
			elementHeight: Number
		},
		data(){
			return{
				dad: "",
				num: 1,
				list_num: 0,
				content: "",
				youhuiquan: [],
				img: "http://img.curiousmore.com/667275",
				panduan: 1,
				triggered: false,
				list: [],
				juli: 30,
				xiala_panduan: 1,
				shi: "",
				color: "#FF5252",
				num_list: 1,
				shifu_quan: 1,
				conten: [],
				num_: 1,
				list_biao: 1,
			}
		},
		methods:{
				go(itme){
					console.log(itme.coup_name)
					if(itme.coup_name == "兑换券177") {
						uni.navigateTo({
							url: "/pages/My/vipCenter/vipCenter"
						})
					}else{
						uni.reLaunch({
							url:"/pages/Friend/videoChat/videoChat"
						})
					}
					try{
						uni.setStorageSync('kaquan',itme)
					}catch(e){}
				},
				shijian(){
					const shijian = new Date().getTime()
					const chuan = new Date(shijian)
					const nian = chuan.getFullYear()
					const yue = chuan.getMonth() + 1 < 10 ? "0" + (chuan.getMonth() + 1) : chuan.getMonth() + 1
					const ri = chuan.getDate() < 10 ? "0" + chuan.getDate() : chuan.getDate()
					const shi = chuan.getHours() < 10 ? "0" + chuan.getHours() : chuan.getHours()
					const fen = chuan.getMinutes() < 10 ? "0" +  chuan.getMinutes() :  chuan.getMinutes()
					const miao = chuan.getSeconds() < 10 ? "0" + chuan.getSeconds() : chuan.getSeconds()
					this.shi = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao
				},
				async	quan_list(){
						uni.showLoading({
						    title: '加载中'
						})
						const res = await this.$myRequest({
							url:"/userCoupon/queryListPage",
							data:{
								user_id: this.dad,
								pageSize: 10,
								currentPage: this.num_,
								status: this.num_list
							}
						})
						let pan = new Date(this.shi).getTime()
						if(res.code == 0){
							if(res.data.length < 10){
								this.xiala_panduan = 2
							}else{
								this.xiala_panduan = 1
							}
							if(res.data.length == 0){
								uni.showToast({
									title:"暂无数据",
									icon:"loading"
								})
							}
							res.data.forEach((itme) => {
								let d = new Date(itme.overdue_time).getTime()
								if(itme.discount == 0.5){
									itme.shuxing = "5折"
								}else if(itme.discount == 1){
									itme.shuxing = "兑换券"
								}else {
									itme.shuxing = "全额"
								}
								if(itme.status == 3){
									itme.pan = false
								}else{
									itme.pan = true
								}
							})
							if(this.youhuiquan.length == 0){
								this.youhuiquan = res.data
							}else{
								this.youhuiquan = this.youhuiquan.concat(res.data)
							}
							this.conten = this.youhuiquan
							uni.hideLoading()
							this.panduan = 1
						}else{
							uni.showToast({
								title:"未响应",
								icon:"none"
							})
						}
						this.triggered = false
					},
		async	quan(){
				uni.showLoading({
				    title: '加载中'
				})
				const res = await this.$myRequest({
					url:"/userCoupon/queryListPage",
					data:{
						user_id: this.dad,
						pageSize: 10,
						currentPage: this.num
					}
				})
				let pan = new Date(this.shi).getTime()
				if(res.code == 0){
					if(res.data.length < 10){
						this.xiala_panduan = 2
					}else{
						this.xiala_panduan = 1
					}
					res.data.forEach((itme) => {
						let d = new Date(itme.overdue_time).getTime()
						if(itme.discount == 0.5){
							itme.shuxing = "5折"
						}else if(itme.discount == 1){
							itme.shuxing = "兑换券"
						}else {
							itme.shuxing = "全额"
						}
						if(itme.status == 3){
							itme.pan = false
						}else{
							itme.pan = true
						}
					})
					if(this.youhuiquan.length == 0){
						this.youhuiquan = res.data
					}else{
						this.youhuiquan = this.youhuiquan.concat(res.data)
					}
					this.list = this.youhuiquan
					uni.hideLoading()
					this.panduan = 1
				}else{
					uni.showToast({
						title:"未响应",
						icon:"none"
					})
				}
				this.triggered = false
			},
			scrolltolower(){
				if(this.xiala_panduan == 1 && this.list_shuju == 0){
					this.panduan = 1
					this.num++
					this.quan()
				}
				if(this.xiala_panduan == 1 && this.list_shuju != 0){
					this.num_++
					this.quan_list()
				}
			},
			onPulling(){
				
			},
			onRefresh(){
				this.triggered = true
				this.panduan = 2
				if(this.shifu_quan == 2){
					this.num_ = 1
				}else{
					this.num = 1
				}
				this.youhuiquan = []
				this.xiala_panduan = 1
				if(this.list_shuju == 0){
					this.quan()
				}else{
					this.quan_list()
				}
			}
		},
		onLoad() {
			this.shijian()
			try{
				this.dad = uni.getStorageSync('userif_list').user_id
				if(this.list_shuju == 0){
					this.quan()
				}else if(this.list_shuju == 1){
					this.panduan = 3
					this.num_list = 3
					this.quan_list()
				}else if(this.list_shuju == 2){
					this.panduan = 3
					this.num_list = 1
					this.quan_list()
				}else if(this.list_shuju == 3){
					this.panduan = 3
					this.num_list = 2
					this.quan_list()
				}
			}catch(e){console.log(e)}
			
		},
		onShow() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.clo{
		color: #C4C4C4;
		border: 0.9rpx solid #C4C4C4;
	}
	.kaike{
		color: #FF7300;
		font-size: 21.744rpx;
		font-weight: bold;
	}
	.ranse{
		color: #FF7300;
	}
	.scrollCla {
		width: 750rpx;
		box-sizing: border-box;
		padding-bottom: 10rpx;
	}
</style>
